<template>
  <div>
    <div class="goodsbox">
      <ul>
        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支官方建议零售价121</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>

        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
        <li class="boxlist">
          <router-link to>
            <img src="http://static.ruitaowang.com/attached/file/2019/04/23/20190423174503180.jpg">
            <div>特尔特鹿血酒单支500</div>
          </router-link>
          <router-link to class="bomrouter">
            <div class="bomnew">
              <div>￥188</div>
              <br>
              <div class="bom_sun">原价:200</div>
            </div>
            <img src="../../assets/1_6.png">
          </router-link>
        </li>
      </ul>
    </div>
    <ul
      style="background:white;"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <li v-for="item in list" :key="item.length">{{ item }}</li>
      <div class="loading" v-if="loading">
        <span id="load-text">{{loadText}}</span>
      </div>
    </ul>
  </div>
</template>

<script>
import { InfiniteScroll } from "mint-ui";
export default {
  components: {
    [InfiniteScroll.name]: InfiniteScroll
  },
  data() {
    return {
      list: [1, 2, 3, 4],
      loading: false,
      loadText: "加载中...."
    };
  },
  mounted() {},
  methods: {
    loadMore() {
      console.log(9999);
      if (this.list.length > 40) {
        this.loading = true;
        this.loadText = "已加载全部数据";
      } else {
        this.loading = true;
        setTimeout(() => {
          let last = this.list[this.list.length - 1];
          for (let i = 1; i <= 10; i++) {
            this.list.push(last + i);
          }
          this.loading = false;
        }, 2500);
      }
    }
  }
};
</script>

<style scoped>
@import "../../assets/personal/css/new_nine.css";
</style>
